<%@ page import="com.wuming.caiwu.security.SecurityHander" %><%--
  Created by IntelliJ IDEA.
  User: zengyao
  Date: 2018/6/30
  Time: 14:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/share/taglib.jsp" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <title>助教信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${allServerPath}static/layui/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-upload button {
            background: none;
            position: absolute;
            top: 10px;
            left: 0px;
            width: 180px;
            height: 180px;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="background-color: #f0f2f5;">
<div style="padding: 15px;margin: 15px;background-color: #fff;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>基本信息</legend>
    </fieldset>
    <form class="layui-form" id="editUser">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">助教昵称</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="nickname" class="layui-input" type="text" autocomplete="off" placeholder="请输入助教昵称"
                           value="${assistant['nickname']}">
                </div>
            </div>


            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">助教头像</label>

                <div class="layui-input-inline">
                    <div class="layui-upload layui-input-inline imageWidth">
                        <div class="layui-upload-list">
                            <button type="button" class="layui-btn" id="imgUrl"></button>
                            <c:if test="${assistant['imgUrl'] != null}">
                                <img style="width: 180px;height: 180px;" class="layui-upload-img" src="${assistant['imgUrl']}"
                                     id="imgUrlImg">
                            </c:if>
                            <c:if test="${assistant['imgUrl'] == null}">
                                <img style="width: 180px;height: 180px;" class="layui-upload-img" src="${allServerPath}/static/images/insure/more.png"
                                     id="imgUrlImg">
                            </c:if>
                            <input type="hidden" name="imgUrl" value=""/>
                            <p style="text-align: center;margin-top: 10px;">助教头像</p>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">助教年龄</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="age" class="layui-input" type="text" autocomplete="off" placeholder="请输入助教年龄"
                           value="${assistant['age']}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">工作年限</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="serviceYear" class="layui-input" type="text" autocomplete="off" placeholder="请输入工作年限"
                           value="${assistant['serviceYear']}">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">个性签名</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="signature" class="layui-input" type="text" autocomplete="off" placeholder="请输入个性签名"
                           value="${assistant['signature']}">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">手机号</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="phone" class="layui-input" type="text" autocomplete="off" placeholder="请输入手机号"
                           value="${assistant['phone']}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">每小时价格</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="price" class="layui-input" type="text" autocomplete="off" placeholder="请输入每小时价格"
                           value="${assistant['price']}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">助教等级</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="teachLevel" class="layui-input" type="text" autocomplete="off" placeholder="请输入助教等级"
                           value="${assistant['teachLevel']}">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label" style="width: 120px">排序</label>

                <div class="layui-input-inline">
                    <input style="width: 450px" name="sort" class="layui-input" type="text" autocomplete="off" placeholder="请输入排序"
                           value="${assistant['sort']}">
                </div>
            </div>

        </div>

        <div class="layui-row" style="text-align: center;">
            <button class="layui-btn layui-btn-normal" type="button" name="btnSave" id="saveUser">保存信息</button>
        </div>
        <input type="hidden" name="id" value="${assistant['id']}"/>
    </form>

    <script src="${allServerPath}static/layui/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate', 'jquery', 'upload'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , $ = layui.jquery
                , upload = layui.upload;

            var imgUrl = upload.render({
                elem: '#imgUrl'  /*根据绑定id，打开本地图片*/
                , url: '${allServerPath}web/teachassistant/saveAssistantImg.htmls' /*上传后台接受接口*/
                , auto: true  /*true为选中图片直接提交，false为不提交根据bindAction属性上的id提交*/
                , data: {
                    assistantId: '${assistant.id}',
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.success) {
                        $('#imgUrlImg').attr('src', res.data); //图片链接（base64）
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    layer.msg("上传失败.");
                }
            });

            $("#saveUser").click(function () {
                var imgUrl = $("#imgUrlImg").attr("src");
                if(imgUrl != ''){
                    $("input[name='imgUrl']").val(imgUrl);
                }
                $.ajax({
                    type: "post",
                    url: "${allServerPath}/web/teachassistant/save.htmls",
                    data: $('#editUser').serialize(),// 你的formid
                    dataType: "JSON",
                    success: function (data) {
                        if (data.success) {
                            layer.msg("保存成功.");
                        } else {
                            layer.msg("保存失败,请稍后重试.");
                        }
                    },
                    error: function (msg) {
                        layer.msg("保存失败.");
                    }
                });
            });

        });
    </script>
</div>
</body>
</html>
